<template>
  <view id="box" class="flex-col box">
    <view v-if="topList && topList.length > 0" class="dl flex-row">
      <view class="dt" v-if="isLevelTitle">{{ getLevelName(topList[0].level) }}级分类：</view>
      <view class="fill-width">
        <view v-for="(item, index) in topList" @click="clickItem(item, topList)" 
    		:class="{'active': item.selected}" :key="index" class="dd">
          {{ item.label }}
        </view>
      </view>
    </view>
    <view v-if="children.length > 0" class="flex-row dl">
      <view class="dt" v-if="isLevelTitle">{{ getLevelName(children[0].level) }}级分类：</view>
      <view class="fill-width">
        <view class="dd" v-for="(item, index) in children"
			@click="clickChilrenItem(item,children)" :key="index" 
			:class="{'active': item.selected}"
    	>
          {{ item.label }} 
        </view>
      </view>
    </view>
    <Item 
    	ref="itemRef"
    	:list="otherList" 
    	v-if="otherList.length > 0" 
    	v-model="itemSelectedObjs" 
    	:isLevelTitle="isLevelTitle"
    	:valueKey="valueKey"
    	@itemClick="(item,list) => $emit('itemClick',item,list )"
    />
  </view>
</template>

<script>
import { defineAsyncComponent } from 'vue'
import { traverseTree } from "@/framework/utils"
export default {
  name: 'Item',
  components: {
    Item: defineAsyncComponent(() => import('./item'))
  },
  props: {
    list: {},
    modelValue: {
		type: Array,
		default: () => []
	},
    selectedObjList: [],
	isLevelTitle: {
		type: Boolean,
		default: () => false
	},
	valueKey: {
	  type: String,
	  default: () => 'id'
	},
  },
  data() {
    return {
      topList: [],
      children: [],
      otherList: [],
      allSelectedObjs: [],
      selectedObjs: [],
      itemSelectedObjs: [],
    }
  },
  watch: {
    list: {
      handler(val){
        this.topList = JSON.parse(JSON.stringify(val))
      },
      deep: true,
      immediate: true
    },
    itemSelectedObjs: {
      handler(val){
        if(val && val.length > 0)
          this.allSelectedObjs = this.selectedObjs?.concat(val)
          this.$emit('update:modelValue', this.allSelectedObjs)
      },
      deep: true,
      immediate: true
    },
    selectedObjs: {
      handler(val){
        if(val?.length > 0){
			this.allSelectedObjs = val
			this.$emit('update:modelValue', this.allSelectedObjs)
		}
      },
      deep: true,
      immediate: true
    },
	// modelValue: {
	//   handler(val){
	// 	if(val?.length > 0){
	// 		// this.allSelectedObjs = val
	// 		const idArr = val.map(item => item[this.valueKey])
	// 		const idSet = new Set(idArr)
	// 		traverseTree(this.topList, item => {
	// 			item.selected = false
	// 			if(idSet.has(item[this.valueKey])){
	// 				item.selected = true
	// 			}
	// 		})
	// 	}
	//   },
	//   deep: true,
	//   immediate: true
	// },
  },
  methods: {
    clickItem(item, list){
	  list.forEach(it =>  it.selected = false)
	  item.selected = true
      
      this.children = item.children || []
      this.resetUnSelect(list,true)
      this.reset(1)
      this.getSelectedObjs()

      this.$nextTick(() => {
        this.$emit('itemClick',item, list)
      })
    },
    clickChilrenItem(item, list){
      list.forEach(it =>  it.selected = false)
      item.selected = true
      this.otherList = item.children || []
      this.otherList?.forEach(it => {
		it.selected = false
      })

      this.resetUnSelect(list,true)
      this.reset(2)
      this.getSelectedObjs()
      this.$nextTick(() => {
        this.$emit('itemClick',item, list)
      })
    },
    getSelectedObjs(){
      const selectedIdsObj = []
      const topSelect = this.topList.find(item => item.selected)
      const towSelect = this.children.find(item => item.selected)
      const threeSelect = this.otherList.find(item => item.selected)
      if(topSelect){
        selectedIdsObj.push(topSelect)
      }
      if(towSelect){
        selectedIdsObj.push(towSelect)
      }
      if(threeSelect){
        selectedIdsObj.push(threeSelect)
      }
      this.selectedObjs = selectedIdsObj
      return selectedIdsObj
    },
    reset(level){
      if(level === 1){
        this.otherList = []
      }
      if(level === 2){
        this.$refs?.itemRef?.reset()
      }
    },
    resetUnSelect(list,isTop){
      list.forEach(it => {
        if(!isTop){
			it.selected = false
        }
        if(it.children){
          this.resetUnSelect(it.children)
        }
      })
    },
    getLevelName(levelNum){
      const numMap = {
        1: '一',
        2: '二',
        3: '三',
        4: '四',
        5: '五',
        6: '六',
        7: '七',
        8: '八',
        9: '九',
        10: '十',
      }
      return numMap[levelNum]
    },

  },
  mounted() {

  }
}
</script>

<style scoped lang="scss">
.box {
  // background: rgba(255, 255, 255, 0.8);
  .dl, .dd {
    margin: 0;
  }
  .dl {
    border-bottom: 1px dashed #dadada;
    margin: 0 10px;
  }
  .dt {
    color: #8a8a8a;
    min-width: 90px;
  }
  .dd {
    float: left;
    color: #252525;
    margin: 0 5px;
    font-size: 14px;
    cursor: pointer;
    line-height: 35px;
    height: 35px;
  }
  .dd.active {
    color: #3f9eff;
    font-weight: bold;
  }
}
</style>
